<template>
	<view class="tn-gradient-bg__orangeyellow-single" style="padding: 10px;display: flex;flex-direction: column;">
		<view :style="{height: sConf.tH+'px'}"></view>
		<view style="display: flex;justify-content: center; padding: 10px 0;">
			<view class="top-font-title" style="font-size: xx-large;color: #ff7e5f;font-weight: bolder;">升级<text
					style="font-size: xxx-large;font-style: italic;">VIP</text> 会员</view>
		</view>
		<!--
		<view class="item-block item-block-one tn-gradient-bg__orangeyellow" style="display: flex;">
			<view class="item-block-title"><text>福利</text><text
					style="font-size: xx-large;font-weight: bolder;">1</text></view>
			<view class="item-block-content"
				style="display: flex;flex-direction: column;width: 100%;justify-content: center;">
				<view>
					换购指定商品 <text style="font-size: x-large;color: #dd524d;">({{product.length}} 选 1)</text>
				</view>
			</view>
		</view>
		<view class="item-block item-block-tow tn-gradient-bg__orangeyellow" style="display: flex;">
			<view class="item-block-title">
				<text>福利</text><text style="font-size: xx-large;font-weight: bolder;">2</text>
			</view>
			<view class="item-block-content"
				style="display: flex;flex-direction: column;width: 100%;justify-content: center;">
				<view class="">
					海量代金券 价值
					<text style="font-size: x-large;color: #dd524d;">200元</text>
				</view>
			</view>
		</view>
		<view class="item-block item-block-thr tn-gradient-bg__orangeyellow" style="display: flex;">
			<view class="item-block-title">
				<text>福利</text><text style="font-size: xx-large;font-weight: bolder;">3</text>
			</view>
			<view class="item-block-content"
				style="display: flex;flex-direction: column;width: 100%;justify-content: center;">
				<view class="">
					推荐会员享推荐佣金
					<text style="font-size: x-large;color: #dd524d;">10%</text>
				</view>
			</view>
		</view>
		-->
		<view class="tn-gradient-bg__orangeyellow into-shadow"
			style="padding: 15px 15px; border-radius: 10px;margin-top: 10px;">
			<view style="display: flex;justify-content: space-around;align-items: flex-start;">
				<view style="display: flex;flex-direction: column;justify-content: space-around;height: 100%;">
					<view style="color: #fff;"> 2025年12月31日前 享：</view>
					<view style="color: #888;">原价: <text style="text-decoration: line-through;"> 999元 </text>/年</view>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;">
					<view style="color: #fff;"> <text class="top-font-title"
							style="color: #dd524d;font-size: xxx-large;">{{(curLevel?.money / 100).toFixed(2) }}</text>
						元/年
					</view>
				</view>
			</view>
			<view style="padding: 5px 0;display: flex;flex-direction: column;color: #fff;gap: 5px;">
				<view v-for="(item,index) in product" :key="index" :class="{action:curGoods===item.id}"
					@click="goodsChange(item.id)" class="goodsItem" style="padding: 10px 20px;">
					<view class="">加 <text
							style="font-size: larger;color: #dd524d;">{{(item.cur_card / 100).toFixed(2)}}</text>元 换购：
					</view>
					<view style="font-size: larger;font-weight: bold;text-align: center;">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>



		<view v-if="false" class="tn-gradient-bg__orangeyellow"
			style="text-align: center;padding: 15px 0;width: 100%;border-radius: 10px;color: #fff;margin: 10px 0;">
			云商会员有效期：{{curStaff?.lasttime}} </view>
		<!-- 收货地址 -->
		<view v-if="curGoods" style="padding: 20px 10px;display: flex;justify-content:space-between;"
			:class="warn ? 'warn-address' : ''" @tap="addressChange">
			<view style="font-weight: bold;"> 收货地址 </view>
			<view v-if="curAddress">
				<view> {{ zipStr(curAddress?.name) }} {{ zipStr(curAddress?.phone) }}</view>
				<view>{{ curAddress?.sheng }} {{ curAddress?.shi }} {{ curAddress?.xian }}
					{{ curAddress?.zhen }}
				</view>
				<view> {{ curAddress?.address }}</view>
			</view>
			<view v-else>
				<text style="color: #aaa;">请选择收货地址</text>
			</view>
		</view>
		<!-- 选择收货地址 -->
		<tn-action-sheet ref="actionSheetRef"></tn-action-sheet>

		<view style="padding: 10px 0;">
			<button type="primary" :disabled="curStaff?.parent ===null || curStaff?.curLevel.level > 2"
				@click="EventPayBuyVip" style="display: flex;justify-content: center;align-items: center;gap: 10px;">
				<tn-icon name="payment-wechat" size="56" color="#fff"></tn-icon> <text
					style="color: #fff;font-weight: bold;">立即升级</text>
			</button>
		</view>

		<view style="height: 200px;"></view>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		name: "sub-vip-buy",
		data() {
			return {
				sConf: getApp().globalData,
				product: [], // 产品列表
				levelData: [], // 权益列表		
				addressData: [], // 收货地址
				curLevel: null,
				curGoods: null,
				curStaff: null,
				curAddress: null,
				warn: false,
				alert: [
					'您未设置收货地址，请前往添加-> 收货地址'
				]
			};
		},
		methods: {
			async loadDefData(e) {
				console.log('loadDefData', e);
				this.curStaff = e;
				await this.loadPayBuyVipList();
				await this.loadLevelList();
				await this.loadStaffAddress()
				console.log('初始化组件完成');
			},
			/**
			 * 加载升级会员产品
			 */
			loadPayBuyVipList() {
				let host = this.sConf.host + '/weapps/product/'
				let token = this.sConf.token || ''
				let data = {
					is_card: 1,
					is_list: 1,
					status: 1
				}
				utils.authenticatorOnList(host, token, data).then(res => {
					console.log('加载升级会员产品', res);
					this.product = res;
				}).catch(err => {
					console.log('加载升级会员产品_失败', err);
				})
			},
			/**
			 * 加载权益列表
			 */
			loadLevelList() {
				let host = this.sConf.host + '/weapps/staffLevel/'
				let token = this.sConf.token || ''
				let data = {
					status: 1,
					is_show: 1
				}
				utils.authenticatorOnList(host, token, data).then(res => {
					console.log('加载权益列表', res);
					this.levelData = res;
					this.curLevel = res.find(item => item.level === 2);
				})
			},
			/**
			 * 选择产品
			 * @param {Object} e
			 */
			goodsChange(e) {
				this.curGoods = e
			},
			/**
			 * 支付升级会员
			 */
			EventPayBuyVip() {
				console.log('EventPayBuyVip');
				console.log('curStaff', this.curStaff);
				if (this.curStaff.parent === null) {
					// #ifdef MP-WEIXIN
					wx.vibrateShort();
					// #endif
					uni.showToast({
						title: '用户未授权'
					})
					return
				}
				if (this.curGoods === null) {
					// #ifdef MP-WEIXIN
					wx.vibrateShort();
					// #endif
					uni.showToast({
						title: '未选择换购商品'
					})
					return
				}
				if (this.curAddress === null) {
					// #ifdef MP-WEIXIN
					wx.vibrateShort();
					// #endif
					this.warn = true
					uni.showToast({
						title: '未选择收货地址'
					})
					return
				}
				// let host = this.sConf.host + '/weapps/payVip/';
				let host = this.sConf.host + '/weapps/payLevel/';
				let token = this.sConf.token || '';
				let data = {
					level: 2,
					cge: this.curGoods,
					ads: this.curAddress.id
				}
				utils.authenticatorOnPost(host, token, data).then((res) => {
					console.log('支付升级会员', res);
					utils.requestPaymentSync(res[0]).then(r => {
						console.log('支付成功', r);
						this.$emit('payed', res[1])
					}).catch(err => {
						console.log('支付失败', err);
						this.$emit('payed', res[1])
					})
				});
			},
			/**
			 * 转换文本
			 */
			zipStr(e) {
				return utils.zipStr(e)
			},
			/**
			 * 转换地址对象
			 */
			convolAddress(e) {
				return this.addressData.find(item => item.id === e)
			},
			/**
			 * 加载用户收货地址
			 */
			loadStaffAddress() {				
				let host = this.sConf.host + '/weapps/address/';
				let token = this.sConf.token || '';
				let data = {
					sid: this.sConf.auth.id
				}
				utils.authenticatorOnList(host, token, data).then((res) => {
					console.log('加载收货地址', res);
					this.addressData = res;
					if (res.length === 0) {
						uni.navigateTo({
							url:'/pageb/userinfo/address'
						})
					}
				});
			},
			/**
			 * 选择地址
			 */
			addressChange() {
				console.log('addressChange');
				let that = this
				let tmpData = []
				this.addressData.forEach(item => {
					tmpData.push({
						value: item.id,
						text: this.zipStr(item.name) + ' ' + this.zipStr(item.phone),
						desc: item.address
					})
					console.log('转换数据.');
				})
				if (tmpData.length === 0) {
					this.$emit("navAddress");
				}
				this.$refs.actionSheetRef.show({
					actions: tmpData,
					title: '请选择收货信息',
					cancel: () => {
						return true
					},
					select: (index, value) => {
						console.log('选项被点击', index, value)
						that.curAddress = that.convolAddress(value)
						that.warn = false
						return true
					}
				})
			},
			enentNoticeClose() {
				this.alert = []
			},
			eventNoticeAct(e) {
				console.log('enentNoticeAct', e);
				uni.redirectTo({
					url: '/pageb/userinfo/address'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-block-one {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
		border-radius: 10px 10px 0 0;

		.item-block-title {
			padding: 15px;
			background-color: #8d4534;
			color: #fff;
			border-radius: 10px 25px 0 10px;
		}

		.item-block-content {
			color: #fff;
			padding: 10px 10px 20px 10px;
		}
	}

	.item-block-tow {
		clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
		border-radius: 0;

		.item-block-title {
			padding: 15px;
			background-color: #8d4534;
			color: #fff;
		}

		.item-block-content {
			color: #fff;
			padding: 25px 0 25px 10px;
		}

	}

	.item-block-thr {
		clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
		border-radius: 0 0 10px 10px;

		.item-block-title {
			padding: 15px;
			background-color: #8d4534;
			color: #fff;
			border-radius: 0 10px 25px 10px;
		}

		.item-block-content {
			color: #fff;
			padding: 25px 0 10px 10px;
		}
	}

	.into-shadow {
		box-shadow: inset 0 0 10px 10px #F4B017;
	}

	.btn-shadow {
		box-shadow: inset 0 0 10px 5px #4cd964;
	}

	.goodsItem {
		border-radius: 5px;
		background: linear-gradient(135deg, #607d8b, #455a64);
	}

	.action {
		box-shadow: inset 0 0 10px 3px #4cd964;

	}
</style>